<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
</head>

<body>
	<div class="box">
		<table class="table">
			<thead>
				<th>添加品牌</th>
			</thead>
			<tbody>
				<tr>
					<td>品牌名称</td>
					<td>
						<input type="text" placeholder="输入要添加的名称" v-model.trim="branch" />
						<input type="submit" value="添加" v-on:click="addbranch" />
					</td>
				</tr>
			</tbody>
		</table>
		<table class="table table-bordered table-hover">
			<thead>
				<th>#</th>
				<th>品牌名称</th>
				<th>状态</th>
				<th>创建时间</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr v-for="(item,index) in brandlist" :key="item.id" :title="item.name">
					<td>{{index}}</td>
					<td>{{item.name}}</td>
					<td>
						<input type="checkbox" name="" :id="'cd' + item.id" v-model="item.check" />
						<label :for="'cd' + item.id" v-if="item.check">已选中</label><label :for="'cd' + item.id"
							v-if="item.check == false">未选中</label>
					</td>
					<td>{{item.time}}</td>
					<td>
						<a href="javascript:;" @click="remove(item.id)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- <input type="checkbox" name="" id=""> -->
	<script>
		const vm = new Vue({
			el: ".box",
			data: {
				branch: "",
				// 下一个可用的 id 为 nextId
				nextId: 5,
				brandlist: [
					{
						id: 1,
						name: "宝马",
						check: true,
						time: new Date(),
						remove: "删除",
					},
					{
						id: 2,
						name: "奥迪",
						check: false,
						time: new Date(),
						remove: "删除",
					},
					{
						id: 3,
						name: "法拉利",
						check: true,
						time: new Date(),
						remove: "删除",
					},
					{
						id: 4,
						name: "兰博基尼",
						check: false,
						time: new Date(),
						remove: "删除",
					},
				],
				// name: "宝骏",
				// info: '<a href="javascript:;" @click="remove">删除</a>',
				check: '<input type="checkbox" checked/>',
				check1: '<input type="checkbox"/>',
			},
			methods: {
				remove(n) {
					console.log(n);
					// filter(item => item.id !== n)
					// item 为循环的每一项
					// item.id 的值不等于要删除的 值
					// n 为要删除的 id
					this.brandlist = this.brandlist.filter((item) => item.id !== n);
				},
				addbranch() {
					if (this.branch.length == 0) {
						alert("输入内容为空");
						return;
					} else {
						const obj = {
							id: this.nextId,
							name: this.branch,
							check: true,
							time: new Date(),
							remove: '删除'
						}
						// var name = this.branch;
						// console.log(this.brandlist);

						this.brandlist.push(obj);
					}
					this.branch = "";
					this.nextId++
				},
			},
		});
	</script>
</body>

</html>